HTMLWidgets.widget({

  name: 'barChart',

  type: 'output',

  factory: function (el, width, height) {

    // TODO: define shared variables for this instance

    return {

      renderValue: function (x) {
        d3.select(el).append("svg")
          .attr("width", width)
          .attr("height", height);

        data = FileAttachment("category-brands.csv").csv({ typed: true })


        const svg = d3.create("svg")
          .attr("viewBox", [0, 0, width, height])
          .attr("width", width)
          .attr("height", height)
          .attr("style", "max-width: 100%; height: auto;");

        const updateBars = bars(svg);
        const updateAxis = axis(svg);
        const updateLabels = labels(svg);
        const updateTicker = ticker(svg);

        yield svg.node();

        for (const keyframe of keyframes) {
          const transition = svg.transition()
            .duration(duration)
            .ease(d3.easeLinear);

          // Extract the top bar’s value.
          x.domain([0, keyframe[1][0].value]);

          updateAxis(keyframe, transition);
          updateBars(keyframe, transition);
          updateLabels(keyframe, transition);
          updateTicker(keyframe, transition);

          invalidation.then(() => svg.interrupt());
          await transition.end();
        }



      },

      resize: function (width, height) {

        // TODO: code to re-render the widget with a new size

      }

    };
  }
});
